
/**
 * @description 清除格式 ClearFormat
 * @author zengqiongying
*/
import E from 'wangeditor'
// import clearnIcon from '../svg/clearn.svg'
const clearnIcon = ''

const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

// 菜单 class ，Button 菜单继承 BtnMenu class
class ClearFormat extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="清除格式">
          <img src="${clearnIcon}" />
       </div>`
    )
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    const editor = this.editor
    const isSelectEmpty = editor.selection.isSelectionEmpty()
    if (isSelectEmpty) {
      // 选区范围是空的，插入并选中一个“空白”
      editor.selection.createEmptyRange()
    }

    // 执行 removeFormat 命令
    editor.cmd.do('removeFormat')

    if (isSelectEmpty) {
      // 需要将选区范围折叠起来
      editor.selection.collapseRange()
      editor.selection.restoreSelection()
    }
  }
  // 菜单是否被激活（如果不需要，这个函数可以空着）
  // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
  // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
  tryChangeActive() {
    // 激活菜单
    // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
    // 2. this.this.isActive === true

    // // 取消激活菜单
    // // 1. 菜单 DOM 节点会删掉 .w-e-active
    // // 2. this.this.isActive === false
    // this.unActive()
  }
}

export default ClearFormat
